import React from 'react'
import { Toast } from 'antd-mobile'
import { SearchBar } from 'components'
import CategoryConetent from './categoryContent'
import CategoryList from './categoryList'
import { post } from '../../utils'
import './index.less'

export default class Category extends React.Component<any, any> {

    public state = {
        dataSource: '',
        recommend: '',
    }
    public render(): JSX.Element {
        const { lists, SET_DETAIL_CATEGORYTHIRDINDEX, categorySecondIndex, SET_DETAIL_CATEGORYTHIRDLISTINDEX } = this.props
        const { dataSource, recommend } = this.state
        return (
            <React.Fragment>
                <SearchBar className="divider category_search" onPress={() => { this.props.history.push('/search') }} />
                {
                    (lists.length > 0)
                        ? <div className="category">
                            <CategoryList title={lists} getChildData={this.getChildData} categorySecondIndex={categorySecondIndex} SET_DETAIL_CATEGORYTHIRDLISTINDEX={SET_DETAIL_CATEGORYTHIRDLISTINDEX} />
                            <CategoryConetent dataSource={dataSource} goto={this.goto} setTabsIndex={SET_DETAIL_CATEGORYTHIRDINDEX} recommend={recommend} />
                        </div>
                        : null
                }
            </React.Fragment>
        )
    }

    public componentDidMount() {
        const { lists } = this.props
        if (!lists.length) {
            Toast.loading('')
        }
        this.getData()
    }

    public getData() {
        const { SET_CATEGORY } = this.props
        post('indexapi/cateAllList').then((data: any) => {
            SET_CATEGORY(data)
            Toast.hide()
        })
    }
    private getChildData = (dataSource: any) => {
        this.setState({
            dataSource,
        })
    }
    private goto = (url: string) => {
        this.props.history.push(url)
    }
}